import React, { memo, useState } from 'react'
import { NavBar, ActionSheet } from 'react-vant';
import { EyeO, ClosedEye } from '@react-vant/icons';
import './index.less'

export default memo(function UpdatePassword(props) {

  const [flag, setFlag] = useState(false)
  const [Captcha, setCaptcha] = useState()
  const [Cflag, setCflag] = useState(false)
  const [phone, setPhone] = useState()//获取表单手机号
  const [passwords, setPassword] = useState()//获取表单密码
  return (
    <div className='UpdatePassword'>
      <div className="top">
        <NavBar
          title="修改密码"
          onClickLeft={() => props.history.push('/my-info')}
        />
      </div>
      <div className="but">
        <div className='but-1'>
          <input type="text" placeholder='请输入手机号码' value={phone} onChange={(e) => setPhone(e.target.value)} />
        </div>
        <div className='but-2'>
          <input type="text" placeholder='请输入短信验证码' value={Captcha} onChange={(e) => setCaptcha(e.target.value)} />
          <div>
            {Cflag ? '60' : <div onClick={() => setCflag(!flag)}>重发验证码</div>}
          </div>
        </div>
        <div className='but-2'>
          <input type={!flag ? 'password' : 'text'} placeholder='请输入登录密码' value={passwords} onChange={(e) => setPassword(e.target.value)} />
          <div>
            {flag ? <EyeO onClick={() => setFlag(!flag)} /> : <ClosedEye onClick={() => setFlag(!flag)} />}
          </div>
        </div>
        <button>确认设置</button>
      </div>
    </div>
  )
})
